<template>
  <div class="gdMap">
    <div class="container" ref="mapContainer" id="container"></div>
  </div>
</template>

<script>
import {createApp} from 'vue';
import alarm from "./alarm/index.vue";

export default {
  data() {
    return {
      map: null,
      list: [{
        address: [116.397428, 39.90923],
        name: '北京',
        num: 500
      }, {
        address: [116.678502, 39.637848],
        name: '北京',
        num: 500
      }, {
        address: [115.938298, 39.643135],
        name: '北京',
        num: 500
      }, {
        address: [116.782872, 40.21496],
        name: '北京',
        num: 500
      },]
    }
  },
  components: {
    alarm
  },

  mounted() {
    var that = this;
    that.map = new AMap.Map(this.$refs.mapContainer, {
      zoom: 10,
      center: [116.397428, 39.90923],
      mapStyle: 'amap://styles/eebad0d61cdc83f8253e3fbcdf5cd2bc',
    });

    // 遍历list，为每个位置创建自定义覆盖物
    this.list.forEach((item) => {
      // 创建一个临时的DOM元素来挂载alarm组件
      const container = document.createElement('div');
      const app = createApp(alarm, {
        name: item.name,
        num: item.num
      });
      app.mount(container);

      // 创建自定义覆盖物
      const customOverlay = new AMap.Marker({
        position: item.address, // 设置覆盖物位置
        map: this.map, // 设置覆盖物添加到哪个地图
        content: container, // 将alarm组件的DOM作为内容
        offset: new AMap.Pixel(-50, -50), // 设置覆盖物位置偏移值
      });
    });
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>

<style lang="scss" scoped>

.gdMap {
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
  }

}
</style>

<style>
.amap-logo {
  display: none !important;
}
</style>
